
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的导航</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
</head>
<body style="background-color: #f3f2f4">

   <div class="container">
    <!-- 导航栏 -->
       <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="example">
           <div class="navbar-header">
               <a class="navbar-brand" href="#">我的导航</a>
           </div>
           <div class="navbar-header" style="margin-left: 500px">
               <a class="navbar-brand" href="#" style="color: #d7dfd9;font-size: 20px"><b>好好学习，天天向上。</b></a>
           </div>
       </nav>
   </div>
   <div>
       <div class="container">
           <div align="center">
               <img src="IMG/ll.png" alt="" class="bd"/>
           </div>
           <div align="center">
               <input type="text" class="inp" name="百度知道"/>
               <button class="a" style="font-size: 22px"><b>搜一下</b></button>
               <!--<p style="color: #e7e7e7;font-size: 20px;text-align: center"><b>百度一下</b></p>-->
           </div>
           <div class="container" style="margin-top: 60px;width:1100px;height: 400px;padding-top: 20px;background-color: #dadcdf">
               <div class="row">
                   <div class="b col-md-2">
                       <ul>
                           <li> <a href="http://git.oschina.net/" style="font-size: 20px">
                               <img src="IMG/Git-logo.gif" alt="" class="logo1"/>Git@osc</a></li>
                           <li><p>代码托管</p></li>
                       </ul>
                   </div>
                   <div class="b col-md-2">
                       <ul>
                           <li><a href="http://www.peise.net/tools/web/" style="font-size: 20px">
                               <img src="IMG/peiselogo.png" alt="" class="logo1"/>配色网
                           </a></li>
                           <li><p>配色网</p></li>
                       </ul>
                   </div>
                   <div class="b col-md-2">
                       <ul>
                           <li> <a href="https://www.codecademy.com/zh/learn/web" style="font-size: 20px">
                               <img src="IMG/boot-logo.png" alt="" class="logo2"/></a></li>
                           <li><p>Bootstrap中文网</p></li>
                       </ul>
                   </div>
                   <div class="b col-md-2">
                       <ul>
                           <li><a href="https://www.codecademy.com/zh/tracks/web" style="font-size: 20px">
                               <img src="IMG/code.png" alt="" class="logo2"/></a></li>
                           <li><p>学习编程</p></li>
                       </ul>
                   </div>
                   <div class="b col-md-2">
                       <ul>
                           <li><a href="http://www.php100.com/" style="font-size: 20px">
                               <img src="IMG/php100-logo.gif" alt="" class="logo2"/></a></li>
                           <li><p>PHP中文网</p></li>
                       </ul>
                   </div>
                   <div class="b col-md-2">
                       <ul>
                           <li><a href="http://www.runoob.com/" style="font-size: 20px">
                               <img src="IMG/runoob-logo.png" alt="" class="logo2"/></a></li>
                           <li><p>菜鸟教程</p></li>
                       </ul>
                   </div>
                   <!--第二行-->
                   <div class="b col-md-2">
                       <ul>
                           <li> <a href="http://www.jquery123.com/" style="font-size: 20px">
                               <img src="IMG/logo-jquery.png" alt="" class="logo3"/></a></li>
                           <li><p>jQuery中文网</p></li>
                       </ul>
                   </div>
                   <div class="b col-md-2">
                       <ul>
                           <li><a href="http://www.bootcss.com/p/font-awesome/" style="font-size: 8px">
                               <img src="IMG/font-logo-sample.png" alt="" class="logo1"/>Font Awesme
                           </a></li>
                           <li><p style="font-size: 13px">Bootstript图标字体</p></li>
                       </ul>
                   </div>
                   <div class="b col-md-2">
                       <ul>
                           <li> <a href="https://www.codester.com/" style="font-size: 20px">
                               <img src="IMG/cod-logo.png" alt="" class="logo2"/></a></li>
                           <li><p>Buy&Sell Scripts</p></li>
                       </ul>
                   </div>
                   <div class="b col-md-2">
                       <ul>
                           <li><a href="http://codepen.io/" style="font-size: 20px">
                               <img src="IMG/depen.png" alt="" class="logo2"/></a></li>
                           <li><p>CodePEN-Front</p></li>
                       </ul>
                   </div>
                   <div class="b col-md-2">
                       <ul>
                           <li><a href="http://www.uisdc.com/" style="font-size: 20px">
                               <img src="IMG/yous.png" alt="" class="logo3"/></a></li>
                           <li><p>优设网</p></li>
                       </ul>
                   </div>
                   <div class="b col-md-2">
                       <ul>
                           <li><a href="https://500px.com/login?r=%2Fflow" style="font-size: 20px">
                               <img src="IMG/500px.png" alt="" class="logo3"/></a></li>
                           <li><p>摄影社区</p></li>
                       </ul>
                   </div>
                   <!--第三行-->
                   <div class="b col-md-2">
                       <ul>
                           <li> <a href="http://blog.sina.com.cn/" style="font-size: 20px">
                               <img src="IMG/logo01.png" alt="" class="logo3"/></a></li>
                           <li><p>新浪博客</p></li>
                       </ul>
                   </div>
                   <div class="b col-md-2">
                       <ul>
                           <li><a href="http://msdn.itellyou.cn/" style="font-size:20px">
                               <img src="IMG/itellyou.cn.png" alt="" class="logo3"/>
                           </a></li>
                           <li><p style="font-size: 13px">MSDN，我告诉你</p></li>
                       </ul>
                   </div>
                   <div class="b col-md-2">
                       <ul>
                           <li> <a href="https://mp.weixin.qq.com/cgi-bin/loginpage?t=wxm2-login&lang=zh_CN" style="font-size: 20px">
                               <img src="IMG/wx_logo2491a6.png" alt="" class="logo2"/></a></li>
                           <li><p>微信公众平台</p></li>
                       </ul>
                   </div>
                   <div class="b col-md-2">
                       <ul>
                           <li><a href="http://www.divcss5.com/" style="font-size: 20px">
                               <img src="IMG/div.png" alt="" class="logo2"/></a></li>
                           <li><p>学习平台</p></li>
                       </ul>
                   </div>
                   <div class="b col-md-2">
                       <ul>
                           <li><a href="http://www.w3school.com.cn/index.html" style="font-size: 20px">
                               <img src="IMG/w3c.png" alt="" class="logo2"/></a></li>
                           <li><p>W3School在线教程</p></li>
                       </ul>
                   </div>
                   <div class="b col-md-2">
                       <ul>
                           <li><a href="http://www.shoto.com/" style="font-size: 20px">
                               <img src="IMG/shoto.png" alt="" class="logo3"/></a></li>
                           <li><p>Shoto</p></li>
                       </ul>
                   </div>

               </div>

           </div>

       </div>
   </div>


   <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>


<script  type="text/javascript"  src="https://rawgithub.com/WickyNilliams/headroom.js/master/dist/headroom.js"></script>

<script  type="text/javascript"  src="https://rawgithub.com/WickyNilliams/headroom.js/master/src/jQuery.headroom.js"></script>

<script type="text/javascript">

    $(".navbar-fixed-top").headroom();

</script>


</body>
</html>